まず、ListItemBaseクラスのDIVとListTitleクラスのDIVをつくります。


tooltipbase   画像を登録する
今回はtooltipbaseを使います。
サイトディレクトリ以下のディレクトリに画像を置けば追加の設定無しにサイトに画像の場所を特定させることができるので今回はそうします。

tooltipbase内部に「params:」を置き、続いて「path=」を使って画像のパスを登録し、最後に「;」を置いてパラメータブロックを閉じます。
これで猫の画像「cat-gb90ec0d2d_640.jpg」がリストアイテムに登録されます。


ListItemBase   tag   リストアイテムに文章を付ける
LiteItemBaseのtagを使ってリストアイテムに「猫」と付けます。


ListItemBase   iwidth   リストアイテムの幅を決める
LiteItemBaseのiwidthを使ってリストアイテムの幅を160pxにします。


ListItemBase   categories   ListItemBaseをListTitleに引っ付ける
ListTitleの内部に「お気に入りの画像」を入れ、ListItemBaseのcategoriesにも「お気に入りの画像」を入れます。
ListTitleの内部文字列と同じ文字列をListItemBaseがそのcategoriesに持つことによって、両者LiteItemBase（子）とListTitle（親）が結びつきます。


実際の表示

リストアイテムに更なる画像、ここでは木の画像「tree-g458594007_640.jpg」を追加します。
前回と同様に「params:」以降に「path」を使って登録します。


木の画像を登録し、アイテムのtag「猫」というのは、おかしくなったので「猫と木」に変更します。
各アイテムそれぞれにタイトルを付けたい時はpathに続いてtagを使って登録します。


実際の表示

2枚の画像を登録しましたが、最初の画像である猫の画像「cat-gb90ec0d2d_640.jpg」1枚しか表示されませんでした。

リストアイテムに登録したすべての画像を表示させるために、ListTitleに「ListViewOptions="FX"」を追加して表示方法を「FX」に変更します。


実際の表示

これでリストアイテムに登録した全ての画像が表示されました。

次に木の画像を他より目立たせる方法を考えます。
これには画像の大きさ、枠の色、タイトルの装飾を変えるというのがあります。

そこで木の画像について、画像の大きさをiwidthを使って160から200に、枠の色をiRectColorを使ってgoldに、そして[]を使ってタイトルの一部を太字にします。


実際の表示

これで木の画像が目立つようになりました。